<template>
	<view class="Stepper-box">
		<view class="jiajian" :class="count > min ? 'jiayes' : 'jiano'" mode="" @click="decrement">
		<text>-</text>
		</view>
		<text>{{ count }}</text>
		<view class="jiajian" :class="count < max ? 'jiayes' : 'jiano'" mode="" @click="increment">
			<text>+</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		defineEmits,
		defineProps,
		watchEffect
	} from 'vue';

	// 接收父组件传入的最小值、最大值和初始值
	const props = defineProps({
		min: {
			type: Number,
			default: 1
		},
		max: {
			type: Number,
			default: 10
		},
		modelValue: {
			type: Number,
			default: 1
		}
	});

	// 定义emit
	const emit = defineEmits(['update:modelValue']);

	// count控制器
	const count = ref(props.modelValue);

	// 增加数量
	const increment = () => {
		if (count.value < props.max) {
			count.value++;
			updateParent();
		}
	};

	// 减少数量
	const decrement = () => {
		if (count.value > props.min) {
			count.value--;
			updateParent();
		}
	};

	// 更新父组件
	const updateParent = () => {
		emit('update:modelValue', count.value);
	};
	watchEffect(() => {
		console.log('父组件传递的 modelValue:', props.modelValue);
	});
	// 监听外部变化
	watch(() => props.modelValue, (newValue) => {
		count.value = newValue;
	});
</script>

<style scoped>
	.Stepper-box {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.Stepper-box image {
		width: 40rpx;
		height: 40rpx;
	}
	.jiajian{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 1rpx solid #000;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.jiajian text{
		height: 100%;
		line-height: 38rpx;
		font-size: 40rpx;
	}
	.jiayes {
		color: #000;
	}

	.jiano {
		color: #d0d0d0;
		border: 1rpx solid #d0d0d0;
	}

</style>